<template>
  <div class="invite_page">
    <content-page>
      <div class="header_back_page" @click="backPage">
        <van-icon name="arrow-left" style="margin-right: 4px" />冰山大数邀请您关注房产走势
      </div>
      <div>
        <div class="invite_warp1">
          <div class="invite_title">邀请好友,送冰币!</div>
          <div class="invite_num">{{ userCount }}</div>
          <div class="invite_progress">
            <div class="invite_progress_item">
              <img class="i_p_item_img" src="../../assets/icon/share1.png" alt="">
              <div class="i_p_item_desc">邀请好友</div>
            </div>
            <div class="invite_progress_item2">---></div>
            <div class="invite_progress_item">
              <img class="i_p_item_img" src="../../assets/icon/share2.png" alt="">
              <div class="i_p_item_desc">好友关注</div>
              <div class="i_p_item_desc i_p_item_desc2" @click="followBingSan">冰山大数</div>
            </div>
            <div class="invite_progress_item2">---></div>
            <div class="invite_progress_item">
              <img class="i_p_item_img" src="../../assets/icon/share3.png" alt="">
              <div class="i_p_item_desc">双方各得{{ userCount }}个冰币</div>
            </div>

          </div>
        </div>
        <div class="invite_btn" @click="inviteMyFriend">马上邀请好友</div>
      </div>
    </content-page>
  </div>
</template>

<script>
import contentPage from '../../components/content_page'
export default {
  name: 'Invite',
  components: { contentPage },
  data() {
    return {
      userCount: 10,
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {
    backPage() {
      this.$router.back(-1)
    },
    followBingSan() {
      this.$toast('关注冰山大数')
    },
    inviteMyFriend() {
      this.$toast('邀请好友')
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";
  .invite_page{
    background-color: #f0f0f0;
    min-height: 100vh;
  }

.header_back_page{
  padding: pxTorem(20px) 0 pxTorem(20px) pxTorem(20px);
  font-size: pxTorem(32px);
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-bottom: 1px solid #ffffff;
}
  .invite_warp1{
    .invite_title{
      margin-top: pxTorem(20px);
      font-size: pxTorem(60px);
      color: #333333;
      text-align: center;
    }
    .invite_num{
      width: pxTorem(400px);
      height: pxTorem(400px);
      text-align: center;
      line-height: pxTorem(400px);
      font-size: pxTorem(180px);
      background: #1296db;
      color: #ffffff;
      border-radius: 50%;
      margin: pxTorem(40px) auto;
    }
    .invite_progress{
      width: pxTorem(680px);
      border: 1px solid #999999;
      background-color: #ffffff;
      border-radius: pxTorem(8px);
      margin: auto;
      display: flex;
      justify-content: space-between;
      padding: pxTorem(30px);
      height: pxTorem(252px);
      .invite_progress_item{
        width: pxTorem(130px);
        display: flex;
        align-items: center;
        flex-direction: column;
        .i_p_item_img{
          width: pxTorem(100px);
          height: pxTorem(100px);
          margin-bottom: pxTorem(20px);
        }
        .i_p_item_desc{
          white-space: pre-wrap;
          font-size: pxTorem(28px);
          color: #999999;
        }
        .i_p_item_desc2{
          color: #1296db;
        }
      }
      .invite_progress_item2{
        line-height: pxTorem(149.6px);
        color: #999999;
      }
    }
  }
  .invite_btn{
    width: pxTorem(400px);
    height: pxTorem(80px);
    line-height: pxTorem(80px);
    background-color: #1296db;
    border-radius: pxTorem(60px);
    text-align: center;
    margin: pxTorem(120px) auto 0 auto;
    font-size: pxTorem(32px);
    color: #ffffff;
  }
</style>
